<template>
  <v-layout type="map">
    <p class="map-title">系统应用</p>
    <ul class="map-lis">
      <li>
        <div class="item" @click="$router.push({ path: '/scenario' })">
          <div class="item-content">
            <img src="@/assets/img/maps/icon1.png" alt="">
            <p>方案推演</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item" @click="$router.push({ path: '/assess' })">
          <div class="item-content">
            <img src="@/assets/img/maps/icon2.png" alt="">
            <p>评估推演</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item" @click="$router.push({ path: '/deduce' })">
          <div class="item-content">
            <img src="@/assets/img/maps/icon3.png" alt="">
            <p>分支推演</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item" @click="$router.push({ path: '/gameTask' })">
          <div class="item-content">
            <img src="@/assets/img/maps/icon4.png" alt="">
            <p>智能训练</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon5.png" alt="">
            <p>人机对抗</p>
          </div>
        </div>
      </li>
    </ul>
    <p class="map-title">功能测试</p>
    <ul class="map-lis">
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon6.png" alt="">
            <p>海战场想定编辑模块</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon7.png" alt="">
            <p>高通量并行仿真模块</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon8.png" alt="">
            <p>云端化博弈训练模块</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon9.png" alt="">
            <p>人机对抗模块</p>
          </div>
        </div>
      </li>
    </ul>
    <p class="map-title">性能测试</p>
    <ul class="map-lis">
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon10.png" alt="">
            <p>可评估指标数量</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon11.png" alt="">
            <p>超实时扮演加速速率</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon12.png" alt="">
            <p>访问需求支持数量</p>
          </div>
        </div>
      </li>
      <li>
        <div class="item">
          <div class="item-content">
            <img src="@/assets/img/maps/icon13.png" alt="">
            <p>平行仿真分支数量</p>
          </div>
        </div>
      </li>
    </ul>
  </v-layout>
</template>
  
  <script>
  export default {
    data() {
      return {
        //  detailData: {}
      };
    },
    async mounted() {
      
    },
    methods: {
      
    }
  }
  </script>
<style lang="less" scoped>
.map-title{
  height: 24px;
  font-size: 18px;
  font-weight: bold;
  color: #FFF;
  padding: 16px 0 0;
}
.map-lis{
  display: flex;
  margin: 0 -8px;
  // flex-wrap: wrap;
  li{
    flex: 1;
    padding: 0 8px;
    // min-width: 216px;
    margin-top: 16px;
  }
  .item{
    height: 150px;
    box-shadow: inset 0px 1px 4px 0px rgba(0,0,0,0.4966);
    // border: 1px solid;
    background-image: linear-gradient(163deg, rgba(2, 108, 230, .3), rgba(2, 108, 230, .6));
    border-radius: 8px;
    cursor: pointer;
    transform: all .3s;
    padding: 1px;
    .item-content{
      transform: all .3s;
      border-radius: 8px;
      background: #232728;
      overflow: hidden;
      height: 150px;
    }
    img{
      width: 48px;
      height: 48px;
      margin: 36px auto 0;
      display: block;
    }
    p{
      text-align: center;
      font-size: 14px;
      padding-top: 8px;
    }
    &:hover{
      background-image: linear-gradient(163deg, #026DE7, #262D33);
      .item-content{
        background: #1C2225;
      }
    }
  }
}
</style>